<!-- 加载层 -->
<div *ngIf="isLoading" class="nav-loading">
  <div class="k-ball7a"></div>
  <div class="k-ball7b"></div>
  <div class="k-ball7c"></div>
  <div class="k-ball7d"></div>
</div>

<!-- 菜单层 -->
<ul *ngIf="!isLoading && list.length !== 0" class="nav sidebar-nav">
  <!-- 快速查找 -->
  <li apes-popover
      [apesContent]="queryContentTemplate"
      [apesPlacement]="'bottom'"
      [apesOverlayClassName]="'sidebar-nav-list'"
      [(apesVisible)]="visible"
      [apesTrigger]="'click'"
      class="sidebar-nav-query">

    <apes-input-group [apesSuffix]="suffixIconSearch">
      <input apes-input
             placeholder="拼音/首字母搜索"
             type="search"
             (keyup)="onKeyUp($event)"
             class="fn-sidebar-input">
    </apes-input-group>
    <ng-template #suffixIconSearch>
      <img [src]="'./assets/tmp/img/fn/search.png'"/>
    </ng-template>


    <ng-template #queryContentTemplate>
      <ul class="sidebar-nav-query-content-box">
        <ng-container *ngIf="queryList.length > 0">
          <li *ngFor="let child of queryList">
            <div class="sidebar-nav-query-content-box-title">
              {{child.search}}
            </div>
            <ul class="sidebar-nav-query-content">
              <ng-container *ngFor="let item of child.child">
                <li class="sidebar-nav-query-content-link">
                  <a (click)="onSelect(item,'search')"
                     [target]="item.target">{{item.text}}</a>
                </li>
              </ng-container>
            </ul>
          </li>
        </ng-container>
        <ng-container *ngIf="queryList.length == 0">
          <li style="text-align: center; vertical-align: center;padding-top: 10px;color: #999;">
            <span>{{searchTitle}}</span>
          </li>
        </ng-container>
      </ul>
    </ng-template>
  </li>

  <li class="nav-submenu-open">
    <ul class="nav nav-sub nav-depth0" style="padding-top: 36px">
      <li class="nav-submenu-open">
        <a class="nav-sub-title">
          <i apes-icon apesType="snippets"></i>
          <span>常用菜单</span>
        </a>
        <ul class="nav nav-sub nav-depth1">
          <ng-container *ngFor="let pin of pinData">
            <li class="nav-submenu-open nav-child1">
              <a class="nav-sub-title" (click)="onSelect(pin,'common')">{{pin.name}}</a>
              <div class="nav-pushpin active">
                <span class="nav-pushpin-span" (click)="pushPin(pin)" attr.link="{{pin.link}}"></span>
                <i apes-icon apesType="pushpin" [apesTheme]="'fill'"></i>
              </div>
            </li>
          </ng-container>
        </ul>
      </li>
    </ul>

  </li>
  <ng-container *ngFor="let group of list">
    <ng-template [ngIf]="group._hidden !== true">
      <!--<ng-template>-->
      <li [routerLinkActive]="['nav-item-selected']" [class.nav-submenu-open]="group._open">
        <!--<a *ngIf="group._type === 3" class="nav-sub-title" (click)="toggleOpen(group)"-->
        <!--(mouseenter)="showSubMenu($event, group)">-->
        <!--<i apes-icon [apesType]="group.icon"></i>-->
        <!--<span>{{ group.text }}</span>-->
        <!--<i class="nav-icon" apes-icon [apesType]="group._open ? 'up' : 'down'"></i>-->
        <!--</a>-->

        <ul *ngIf="group._type === 3" class="nav nav-sub test nav-depth{{group._depth}}">
          <ng-container *ngFor="let child1 of group.children">
            <li *ngIf="child1._hidden !== true" [routerLinkActive]="['nav-item-selected']"
                [class.nav-submenu-open]="child1._open">
              <!-- link '/fn'+-->
              <a *ngIf="child1._type === 1" (click)="onSelect(child1)" [routerLink]="child1.link"
                 [target]="child1.target"
                 [class.nav-dept-bg]="child1.link !== undefined && child1.text === (text ? text : '')">
                <!--[target]="child1.target" [class.nav-dept-bg]="child1.link !== undefined && child1.text === (text ? text : group.children[0].text)">-->
                <i *ngIf="!settings.layout.collapsed" class="{{ child1.icon }}"></i>
                <apes-tooltip *ngIf="settings.layout.collapsed" apesPlacement="right" [apesTitle]="child1.text">
              <span apes-tooltip>
                <i class="{{ child1.icon }}"></i>
              </span>
                </apes-tooltip>
                <span>{{ child1.text }}</span>
              </a>
              <!-- external link -->
              <!--<a *ngIf="child1._type === 2" href="{{ child1.externalLink }}" target="{{child1.target}}">-->
              <!--<i *ngIf="!settings.layout.collapsed" class="{{ child1.icon }}"></i>-->
              <!--<apes-tooltip *ngIf="settings.layout.collapsed" apesPlacement="right" [apesTitle]="child1.text">-->
              <!--<span apes-tooltip>-->
              <!--<i class="{{ child1.icon }}"></i>-->
              <!--</span>-->
              <!--</apes-tooltip>-->
              <!--<span>{{ child1.text }}</span>-->
              <!--</a>-->
              <!-- has children link -->
              <a *ngIf="child1._type === 3" class="nav-sub-title" (click)="toggleOpen(child1)"
                 (mouseenter)="showSubMenu($event, child1)">
                <i apes-icon [apesType]="child1.icon"></i>
                <span>{{ child1.text }}</span>
                <!--<i class="nav-icon" apes-icon [apesType]="child1._open ? 'up' : 'down'"></i>-->
                <i class="nav-icon" [class.nav-icon-trans]="child1._open">
                  <img src="./assets/tmp/img/fn/arrow_down.png" style="width: 24px;height: 24px;">
                </i>
              </a>
              <!-- badge -->
              <div *ngIf="child1.badge" title="{{child1.badge}}" class="badge badge-{{child1.badge_status}}"
                   [class.badge-dot]="child1.badge_dot">
                <em>{{child1.badge}}</em>
              </div>
              <!-- Level 2 -->
              <ul *ngIf="child1._type === 3" class="nav nav-sub nav-depth{{child1._depth}}">
                <ng-container *ngFor="let child2 of child1.children">
                  <li *ngIf="child2._hidden !== true && showMenu(child2)" [routerLinkActive]="['nav-item-selected']"
                      class="nav-child1"
                      [class.nav-submenu-open]="child2._open"
                      [class.nav-dept-bg]="child2.link !== undefined && child2.text === (text ? text : '')">
                    <!--[class.nav-dept-bg]="child2.link !== undefined && child2.text === (text ? text : child1.children[0].text)">-->
                    <!-- link '/app'+-->
                    <a *ngIf="child2._type === 1" (click)="onSelect(child2)" [routerLink]="child2.link"
                       [target]="child2.target">{{ child2.text }}</a>
                    <div *ngIf="child2._type === 1"
                         class="nav-pushpin" [ngClass]="{'active':child2.pushpin}">
                      <span class="nav-pushpin-span" (click)="pushPin(child2)" attr.link="{{child2.link}}"></span>
                      <i apes-icon apesType="pushpin" [apesTheme]="child2.pushpin? 'fill':'outline'"></i>
                    </div>
                    <!-- external link -->
                    <!--<a *ngIf="child2._type === 2" href="{{ child2.externalLink }}" target="{{ child2.target }}">{{                      child2.text }}</a>-->
                    <!-- has children link -->
                    <a *ngIf="child2._type === 3" class="nav-sub-title"
                       (click)="toggleOpen(child2)">{{ child2.text }}</a>
                    <!-- badge -->
                    <div *ngIf="child2.badge" title="{{child2.badge}}" class="badge badge-{{child2.badge_status}}"
                         [class.badge-dot]="child2.badge_dot">
                      <em>{{child2.badge}}</em>
                    </div>
                    <!-- Level 3 -->
                    <ul *ngIf="child2._type === 3" class="nav nav-sub test2 nav-depth{{child2._depth}}">
                      <ng-container *ngFor="let child3 of child2.children">
                        <li *ngIf="child3._hidden !== true" [routerLinkActive]="['nav-item-selected']"
                            [class.nav-submenu-open]="child3._open"
                            [class.nav-dept-bg]="child3.link !== undefined && child3.text === (text ? text : '')">
                          <!--[class.nav-dept-bg]="child3.link !== undefined && child3.text === (text ? text : child2.children[0].text)">-->
                          <!-- link -->
                          <a *ngIf="child3._type === 1" (click)="onSelect(child3)" [routerLink]="child3.link"
                             [target]="child3.target">{{ child3.text }}</a>
                          <!-- external link -->
                          <!--<a *ngIf="child3._type === 2" href="{{ child3.externalLink }}" target="{{ child3.target }}">{{-->
                          <!--child3.text }}</a>-->
                          <!-- badge -->
                          <div *ngIf="child3.badge" title="{{child3.badge}}" class="badge badge-{{child3.badge_status}}"
                               [class.badge-dot]="child3.badge_dot">
                            <em>{{child3.badge}}</em>
                          </div>
                        </li>
                      </ng-container>
                    </ul>
                  </li>
                </ng-container>
              </ul>
            </li>
          </ng-container>
        </ul>
      </li>
      <!--<ng-container *ngFor="let child1 of group.children">-->
      <!--<li *ngIf="child1._hidden !== true" [routerLinkActive]="['nav-item-selected']" [class.nav-submenu-open]="child1._open">-->
      <!--&lt;!&ndash; link &ndash;&gt;-->
      <!--<a *ngIf="child1._type === 1" (click)="onSelect(child1)" [routerLink]="child1.link" [target]="child1.target">-->
      <!--<i *ngIf="!settings.layout.collapsed" class="{{ child1.icon }}"></i>-->
      <!--<apes-tooltip *ngIf="settings.layout.collapsed" apesPlacement="right" [apesTitle]="child1.text">-->
      <!--<span apes-tooltip>-->
      <!--<i class="{{ child1.icon }}"></i>-->
      <!--</span>-->
      <!--</apes-tooltip>-->
      <!--<span>{{ child1.text }}</span>-->
      <!--</a>-->
      <!--&lt;!&ndash; external link &ndash;&gt;-->
      <!--<a *ngIf="child1._type === 2" href="{{ child1.externalLink }}" target="{{child1.target}}">-->
      <!--<i *ngIf="!settings.layout.collapsed" class="{{ child1.icon }}"></i>-->
      <!--<apes-tooltip *ngIf="settings.layout.collapsed" apesPlacement="right" [apesTitle]="child1.text">-->
      <!--<span apes-tooltip>-->
      <!--<i class="{{ child1.icon }}"></i>-->
      <!--</span>-->
      <!--</apes-tooltip>-->
      <!--<span>{{ child1.text }}</span>-->
      <!--</a>-->
      <!--&lt;!&ndash; has children link &ndash;&gt;-->
      <!--<a *ngIf="child1._type === 3" class="nav-sub-title" (click)="toggleOpen(child1)" (mouseenter)="showSubMenu($event, child1)">-->
      <!--<i class="{{ child1.icon }}"></i>-->
      <!--<span>{{ child1.text }}</span>-->
      <!--</a>-->
      <!--&lt;!&ndash; badge &ndash;&gt;-->
      <!--<div *ngIf="child1.badge" title="{{child1.badge}}" class="badge badge-{{child1.badge_status}}" [class.badge-dot]="child1.badge_dot">-->
      <!--<em>{{child1.badge}}</em>-->
      <!--</div>-->
      <!--&lt;!&ndash; Level 2 &ndash;&gt;-->
      <!--<ul *ngIf="child1._type === 3" class="nav nav-sub test1 nav-depth{{child1._depth}}">-->
      <!--<ng-container *ngFor="let child2 of child1.children">-->
      <!--<li *ngIf="child2._hidden !== true" [routerLinkActive]="['nav-item-selected']" [class.nav-submenu-open]="child2._open">-->
      <!--&lt;!&ndash; link &ndash;&gt;-->
      <!--<a *ngIf="child2._type === 1" (click)="onSelect(child2)" [routerLink]="child2.link" [target]="child2.target">{{ child2.text }}</a>-->
      <!--&lt;!&ndash; external link &ndash;&gt;-->
      <!--<a *ngIf="child2._type === 2" href="{{ child2.externalLink }}" target="{{ child2.target }}">{{ child2.text }}</a>-->
      <!--&lt;!&ndash; has children link &ndash;&gt;-->
      <!--<a *ngIf="child2._type === 3" class="nav-sub-title" (click)="toggleOpen(child2)">-->
      <!--{{ child2.text }}-->
      <!--</a>-->
      <!--&lt;!&ndash; badge &ndash;&gt;-->
      <!--<div *ngIf="child2.badge" title="{{child2.badge}}" class="badge badge-{{child2.badge_status}}" [class.badge-dot]="child2.badge_dot">-->
      <!--<em>{{child2.badge}}</em>-->
      <!--</div>-->
      <!--&lt;!&ndash; Level 3 &ndash;&gt;-->
      <!--<ul *ngIf="child2._type === 3" class="nav nav-sub test2 nav-depth{{child2._depth}}">-->
      <!--<ng-container *ngFor="let child3 of child2.children">-->
      <!--<li *ngIf="child3._hidden !== true" [routerLinkActive]="['nav-item-selected']" [class.nav-submenu-open]="child3._open">-->
      <!--&lt;!&ndash; link &ndash;&gt;-->
      <!--<a *ngIf="child3._type === 1" (click)="onSelect(child3)" [routerLink]="child3.link" [target]="child3.target">{{ child3.text }}</a>-->
      <!--&lt;!&ndash; external link &ndash;&gt;-->
      <!--<a *ngIf="child3._type === 2" href="{{ child3.externalLink }}" target="{{ child3.target }}">{{ child3.text }}</a>-->
      <!--&lt;!&ndash; badge &ndash;&gt;-->
      <!--<div *ngIf="child3.badge" title="{{child3.badge}}" class="badge badge-{{child3.badge_status}}" [class.badge-dot]="child3.badge_dot">-->
      <!--<em>{{child3.badge}}</em>-->
      <!--</div>-->
      <!--</li>-->
      <!--</ng-container>-->
      <!--</ul>-->
      <!--</li>-->
      <!--</ng-container>-->
      <!--</ul>-->
      <!--</li>-->
      <!--</ng-container>-->
    </ng-template>
  </ng-container>
</ul>

<div *ngIf="!isLoading && list.length === 0" class="no-permission">
  <div>未获菜单权限</div>
</div>
